<template>
    <div>
        <p>this is projects web site</p>
        <el-row>
            <el-col :span="10">
                <h1 @click="dialogProjectInfo = true">项目：{{ projectInfo.name }}</h1>
            </el-col>
            <el-col :span="4">
                <el-button @click="dialogStage=true">添加新阶段</el-button>
            </el-col>
            <el-col :span="1">
                <el-button type="text" style="text-align: right" @click="inviteUser">邀请</el-button>
            </el-col>
            <el-col :span="5">
                <el-input v-model="invite" placeholder="邮箱" clearable></el-input>
            </el-col>
            <el-col :span="3" :offset="1">
                <el-button @click="drawerChat = true">消息</el-button>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
            <el-col>
                <el-card class="box-card" v-for="(item) in stageList" :key="item.rank" shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>{{ item.name }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text"
                                   @click="openAddTaskDialog(item.name,item.stageId)">添加任务
                        </el-button>
                    </div>
                    <div style="height: 160px">
                        <template>
                            <el-table
                                :data="taskList[item.stageId]"
                                height="160"
                                border
                                style="width: 100%">
                                <el-table-column
                                    prop="name"
                                    label="名称">
                                </el-table-column>
                                <el-table-column
                                    label="优先级">
                                    <template slot-scope="scope">
                                        <el-tag :type="taskPriority[scope.row.priority].type">{{taskPriority[scope.row.priority].label}}</el-tag>
<!--                                        <span style="margin-left: 10px">{{ taskPriority[scope.row.priority].type }}</span>-->
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- dialog -->

        <el-dialog
            title="添加新阶段"
            :visible.sync="dialogStage"
            width="30%">
            <el-form ref="form" :model="newStage" label-width="80px">
                <el-form-item label="阶段名称">
                    <el-input v-model="newStage.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogStage = false">取 消</el-button>
                <el-button type="primary" @click="addStages">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="添加新任务"
            :visible.sync="dialogTask"
            width="50%">
            <el-form ref="form" :model="addTaskForm" label-width="80px">
                <el-form-item label="阶段名称">
                    <el-input v-model="addTaskForm.stageName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="任务名称">
                    <el-input v-model="addTaskForm.name"></el-input>
                </el-form-item>
                <el-form-item label="详细说明">
                    <el-input type="textarea" :row="2" v-model="addTaskForm.des"></el-input>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker
                        v-model="addTaskForm.beginTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker
                        v-model="addTaskForm.endTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="优先级">
                    <el-select v-model="addTaskForm.priority" placeholder="请选择">
                        <el-option
                            v-for="item in taskPriority"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="addTaskForm.status" placeholder="请选择">
                        <el-option
                            v-for="item in taskStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务成员">
                    <el-select multiple v-model="addTaskForm.workers" placeholder="请选择">
                        <el-option
                            v-for="item in teamMemberList"
                            :key="item.email"
                            :label="item.nickname"
                            :value="item.uid">
                        </el-option>
                    </el-select>
                    <span style="margin-left: 5px">(可多选)</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTask = false">取 消</el-button>
                <el-button type="primary" @click="addTask">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="项目详情"
            :visible.sync="dialogProjectInfo"
            width="50%">
            <el-descriptions :title="projectInfo.name" :column="2" border>
                <el-descriptions-item label="项目发起人">{{ projectInfo.nickname }}</el-descriptions-item>
                <el-descriptions-item label="发起人邮箱">{{ projectInfo.email }}</el-descriptions-item>
            </el-descriptions>
            <p>成员:</p>
            <el-table
                :data="teamMemberList"
                height="200"
                border
                style="width: 100%">
                <el-table-column
                    prop="nickname"
                    label="名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="email"
                    label="邮件">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogProjectInfo = false">了解</el-button>
            </span>
        </el-dialog>

        <!--        chat drawer-->
        <el-drawer
            title="消息"
            :visible.sync="drawerChat"
            direction="rtl"
            size="50%">
            <chat-component :project-id="parseInt(projectId)"></chat-component>
        </el-drawer>
    </div>
</template>
<script>
import ChatComponent from "@/components/index/ChatComponent.vue";

export default {
    components: {ChatComponent},
    data() {
        return {
            dialogProjectInfo: false,
            dialogStage: false,
            drawerChat: false,
            dialogTask: false,

            invite: "",
            projectId: -1,
            projectInfo: {},
            stageList: [],
            newStage: {
                name: "",
            },
            teamMemberList: [],
            taskList:[],


            taskPriority: [{
                value: 0,
                label: '紧急',
                type:"danger"
            }, {
                value: 1,
                label: '优先',
                type:"warning"
            }, {
                value: 2,
                label: '普通',
                type:"success"
            }, {
                value: 3,
                label: '不重要不紧急',
                type:"info"
            },
            ],
            taskStatus: [{
                value: 0,
                label: '未开始'
            }, {
                value: 1,
                label: '进行中'
            }, {
                value: 2,
                label: '已结束'
            }, {
                value: 3,
                label: '已取消'
            }
            ],
            addTaskForm: {
                projectId: -1,
                stageId: -1,
                stageName: "",
                name: "",
                des: "",
                beginTime: "",
                endTime: "",
                priority: 2,
                status: 0,
                workers: []
            }
        }
    },
    methods: {
        getProjectInfo() {
            this.$axios({
                url: "/api/p/info",
                method: "get",
                headers: {
                    "token": localStorage.getItem("token")
                },
                params: {
                    projectId: this.$route.query.p
                }
            }).then((res) => {
                if (res.data.success) {
                    this.projectInfo = res.data.result;
                }
            })
        },
        addStages() {
            if (this.newStage.name.length === 0) {
                this.$notify.warning("不能为空");
                return;
            }
            this.$axios({
                url: "/api/stage/new",
                method: "post",
                headers: {
                    token: localStorage.getItem("token")
                },
                data: {
                    projectId: this.projectId,
                    name: this.newStage.name,
                    rank: this.stageList.length
                }
            }).then((res) => {
                if (res.data.success) {
                    this.$notify.success("添加成功");
                    this.stageList.push(res.data.result)
                } else {
                    this.$notify.warning("添加失败")
                }
                this.taskList[res.data.result.stageId] = [];
                this.dialogStage = false;
                this.newStage.name = "";
            })
        },
        getStages() {
            this.$axios({
                url: "/api/stage/get",
                method: "get",
                headers: {
                    token: localStorage.getItem("token")
                },
                params: {
                    projectId: this.projectId
                }
            }).then((res) => {
                if (res.data.success) {
                    this.stageList = res.data.result;
                } else {
                    this.$notify.warning("获取阶段列表失败");
                }
            })
        },
        inviteUser() {
            if (this.invite.length === 0) {
                this.$notify.warning("请输入邮箱");
                return;
            }
            this.$axios({
                url: "/api/p/invite",
                method: "post",
                headers: {
                    token: localStorage.getItem("token")
                },
                data: {
                    projectId: this.projectInfo.project_id,
                    masterId: this.projectInfo.master_id,
                    email: this.invite,
                }
            }).then((res) => {
                if (res.data.success) {
                    this.teamMemberList.push(res.data.result);
                    this.$notify.success("添加成功");
                } else {
                    this.$notify.warning(res.data.errorMessage);
                }
                this.invite = ""
            })
        },
        getMoreProjectInfo(projectId) {
            this.$axios({
                url: "/api/p/info/more",
                method: "get",
                headers: {
                    token: localStorage.getItem("token")
                },
                params: {
                    projectId: projectId
                }
            }).then((res) => {
                if (res.data.success) {
                    this.projectInfo = res.data.result;
                } else {
                    this.$notify.warning(res.data.errorMessage);
                }
            })
        },
        getTeamMember(projectId) {
            this.$axios({
                url: "/api/wg/p",
                method: "get",
                headers: {
                    token: localStorage.getItem("token")
                },
                params: {
                    projectId: projectId
                }
            }).then((res) => {
                if (res.data.success) {
                    this.teamMemberList = res.data.result;
                } else {
                    this.$notify.warning(res.data.errorMessage);
                }
            })
        },
        openAddTaskDialog(stageName, stageId) {
            this.addTaskForm.projectId = parseInt(this.projectId);
            this.addTaskForm.stageId = stageId;
            this.addTaskForm.stageName = stageName;
            this.dialogTask = true;
        },
        addTask() {
            for (let index in this.addTaskForm) {
                let v = this.addTaskForm[index];
                if (v === undefined || v === null || (v instanceof Number && v < 0) || (v instanceof String && v.length === 0) || (v instanceof Array && v.length === 0)) {
                    this.$notify.warning("还有内容未被填写");
                    return;
                }
            }
            let temp = [];
            for (let i in this.addTaskForm.workers) {
                temp.push({uid: this.addTaskForm.workers[i]})
            }
            this.addTaskForm.workers = temp;
            this.$axios({
                url: "/api/task/add",
                method: "post",
                headers: {
                    token: localStorage.getItem("token")
                },
                data: this.addTaskForm
            }).then((res) => {
                this.taskList[res.data.result.stageId].push(res.data.result)
                this.dialogTask = false;
                this.initAddTaskForm();
            })
        },
        initAddTaskForm() {
            this.addTaskForm = {
                projectId: -1,
                stageId: -1,
                stageName: "",
                name: "",
                des: "",
                beginTime: "",
                endTime: "",
                priority: 2,
                status: 0,
                workers: []
            }
        },
        getTaskList(projectId){
          this.$axios({
              url:"/api/task/"+projectId,
              method:"get",
              headers:{
                  token:localStorage.getItem("token")
              }
          }).then((res)=>{
              this.taskList = this.filterTaskList(res.data.result)
          })
        },
        filterTaskList(origin){
          let result = {};
          for(let i of this.stageList){
              result[i.stageId] = [];
          }
          for(let i of origin){
              result[i.stageId].push(i);
          }
          return result;
        },
    },
    watch: {
        projectId(newVal) {
            if (newVal > 0) {
                this.getMoreProjectInfo(this.projectId)
                this.getStages();
                this.getTeamMember(this.projectId);
                this.getTaskList(this.projectId)
            }
        }
    },
    created() {
        this.projectId = this.$route.query.p;
    },
    updated() {
        this.projectId = this.$route.query.p;
    }
}
</script>
<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    float: left;
    margin-left: 5px;
    width: 32%;
}
</style>